<template>
  <el-row>
    <el-col :span="24" class="bg1">
      <div class="grid-content bg-purple">
        <FormPanel ref="formPanel" :list="formList" :cols="3" :labelWidth="110" :isSubmitBtn="false" @formChange="changeHandle" />
      </div>
    </el-col>
    <el-col :span="24">
      <div class="btn">
        <el-button size="small" icon="el-icon-folder-add" type="primary" @click="query">确定</el-button>
        <el-button size="small" icon="el-icon-refresh-left" type="primary" @click="reset">取消</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { getProjectNameList, getPartitionList } from '@/api/repair/repair/activitesManage';
// import AddActivity from './addActivity';
export default {
  name: 'addfjxm',
  components: {
    //  AddPjxm
  },
  mixins: [dictionary],
  data() {
    return {
      formList: this.createFormList(),
      visible: false,
      // fetchApi: getOrderList,
      onChangeColumn: [],
      addItemList: []
    };
  },
  mounted() {
    this.getProjectNameList();
    this.getPartitionList();
  },
  methods: {
    validateFn(rule, value, callback) {
      if (value.length < rule.limit) {
        return callback(new Error(rule.message));
      }
      callback();
    },
    async getProjectNameList() {
      const res = await getProjectNameList();
      this.formList.find(x => x.fieldName === 'addItemCodes').itemList = res.data.map(x => ({ value: x.ADD_ITEM_CODE, text: x.ADD_ITEM_NAME }));
      this.addItemList = res.data;
    },
    async getPartitionList() {
      const res = await getPartitionList();
      this.formList.find(x => x.fieldName === 'CHARGE_PARTITION_CODE').itemList = res.data.map(x => ({ value: x.CHARGE_PARTITION_CODE, text: x.CHARGE_PARTITION_NAME }));
    },
    query() {
      this.$refs.formPanel.SUBMIT_FORM();
    },
    reset() {
      this.$emit('closeFj', false);
      // this.$refs.formPanel.RESET_FORM();
      // this.changeHandle()
    },
    changeHandle(val) {
      this.formList
        .find(x => x.fieldName === 'addItemCodes')
        .itemList.forEach((item, index) => {
          if (item.value == val.addItemCodes) {
            val.ADD_ITEM_NAME = item.text;
          }
        });
      this.$emit('closeFj', val);
    },
    // 附加项目名称的change方法
    changeCodeSelect(val) {
      this.formList.find(x => x.fieldName === 'ADD_ITEM_CODE').initialValue = val;
      console.log(val);
      this.addItemList.forEach(x => {
        console.log(x);
        if (x.ADD_ITEM_CODE === val) {
          this.formList.find(x => x.fieldName === 'ADD_ITEM_AMOUNT').initialValue = x.ADD_ITEM_AMOUNT;
        }
      });
    },
    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '附加项目名称',
          fieldName: 'addItemCodes',
          itemList: [],
          change: val => {
            this.changeCodeSelect(val);
          },
          placeholder: '请选择',
          initialValue: '',
          rules: [{ required: true, message: '请选择附加项目名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '附加项目代码',
          fieldName: 'ADD_ITEM_CODE',
          disabled: true,
          placeholder: '',
          initialValue: ''
        },
        {
          type: 'INPUT_NUMBER',
          label: '附加项目收费',
          fieldName: 'ADD_ITEM_AMOUNT',
          disabled: false,
          placeholder: '',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '收费区分代码',
          itemList: [],
          fieldName: 'CHARGE_PARTITION_CODE',
          placeholder: '请选择',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '备注',
          fieldName: 'remark',
          placeholder: '',
          initialValue: ''
        }
      ];
    }
  }
};
</script>

<style scoped lang="less">
.bg1 {
  border: 1px solid @borderColor;
  border-radius: @borderRadius;
  box-shadow: @boxShadow;
  padding: @modulePadding;
  padding-left: 0;
  padding-top: 15px;
  padding-bottom: 15px;
}
.bg2 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.btn {
  text-align: center;
  margin: 15px;
}
.btnStyle {
  margin-top: 10px;
}
</style>
